<template>
    <section class="content">
        <div class="section-block">
            <div class="shadow-block">
                <span>Lighthouse Factory Research</span>
                <h1 style="fontSize:40px">工业富联灯塔工厂</h1>
                <div>
                    <p>在第四次工业革命尖端技术应用整合有卓越成效，堪为全球表率之领先企业</p>
                    <Button @click="viewModal = true" style="margin-left:300px;color:#fff;background:rgba(104,170,253,1);border-radius:6px;">{{ isSignup ? "更新信息" : "报名参观"}}</Button>
                    <Button @click="getSignUpListInfo" style="color:#fff;background:rgba(104,170,253,1);border-radius:6px;">参观人员列表</Button>
                </div>
            
            </div>
            <figure class="map-block">
                <figcaption>走近工业富联灯塔工厂</figcaption>
                <img src="../../assets/images/lighthouse-fac.gif">
            </figure>
            <figure class="video-block">
                <figcaption>工业富联灯塔工厂的奥秘</figcaption>
                <video src="../../assets/videos/lighthouse.mp4" controls></video>
            </figure>
            <figure class="fac-block">
                <figcaption>工业富联灯塔工厂——熄灯工厂成效几何？</figcaption>
                <div class="desc-block">
                    <div>
                        <figure style="text-align:center">
                            <img src="../../assets/images/profile.png" width="50px" height="50px">
                            <figcaption>收益</figcaption>
                        </figure>
                        <p>2018年</p>
                        <p>熄灯工厂创收<b style="font-size:30px">48</b>亿元</p>
                    </div>
                    <div>
                        <figure>
                            <img src="../../assets/images/element.png" width="50px" height="50px">
                            <figcaption>核心要素</figcaption> 
                        </figure>
                        <p>供应链智慧决策</p>
                        <p>表面贴装智能制造平台</p>
                        <p>全自动柔性化装配产线</p>
                        <p>AI智能分检分流系统</p>
                        <p>生产大数据决策中心</p>
                    </div>
                    <div>
                        <figure>
                            <img src="../../assets/images/efficient.png" width="50px" height="50px">
                            <figcaption>成效</figcaption> 
                        </figure>
                        <p>生产效率提升<b style="font-size:30px">30%</b></p>
                        <p>库存周期降低<b style="font-size:30px">15%</b></p>
                        <p>生产人力减少<b style="font-size:30px">92%</b></p>
                    </div>
                </div>
            </figure>
            <figure class="domain-block">
                <figcaption>工业富联“关灯工厂”跻身全球最聪明的 16 个制造场域</figcaption>
                <p>瑞士日内瓦时间2019年1月10日，世界经济论坛宣布工业富联“柔性装配作业智能工厂”（以下简称“关灯工厂”）入选“制造业灯塔工厂”网络七名
    新成员，成为中国五家，全球十六家工业4.0未来智慧工厂的一份子。</p>
                <p>“灯塔工厂”指的是那些在第四次工业革命尖端技术应用整合工作方面卓有成效，堪为全球表率的先进制造基地。2018年，世界经济论坛公布了9家
    “灯塔工厂”，如今，该网络进一步壮大。世界经济论坛表示，这些“灯塔工厂”均选自由全球1000家制造商构成的初始清单，主要评判标准是制造商
    在运用第四次工业革命技术提高经济和运营效益方面取得的成就。
                </p>

                <p>    对于工业富联深圳关灯工厂，世界经济论坛的评价是：在专门生产智能手机等电气设备组件的工厂中采用全自动化制造流程，配备机器学习和人工智能
    型设备自动优化系统、智能自我维护系统和智能生产实时状态监控系统，真正实现“关灯工厂”，在注重优先利用第四次工业革命技术的前提下，
    令生产效率提高30%，库存周期降低15%。
                </p>

                <p>据工业富联副董事长李杰介绍，工业富联的深圳关灯工厂已经基本做到熄灯状态下的无人自主作业，全部生产活动由电子计算机进行控制，生产第一线
    配有机器人而无需配备工人。工业富联自主研发的雾小脑将海量设备连接至边缘计算及云端，应用到表面贴装、数控加工、机器人、组装测试、环境数据
    采集等场景，覆盖全行业数据采集。而机器人+传感器的模式，则开发出机器人AI的自感知、自诊断、自修复、自优化、自适应功能，提高产品良率的
    同时降低成本浪费。
                </p>
        
                <p>自2012年第一座关灯工厂在成都园区投入使用以来，工业富联已经在深圳、成都、郑州、太原等地运行了6座关灯工厂，包括了精密机构件加工工厂，
    智能刀具加工工厂，精密组装、测试及包装工厂等。目前，六座关灯工厂已发展出设备监控维修预测、能耗监控物流配置、质量检测预判改进、产量优化
    智能调度、制程参数调整优化等多项基于工业现场的人工智能应用。
                </p>
        
                <p>关灯工厂的推广带来了显着的经济效益，以此次入选制造业灯塔工厂网络的深圳关灯工厂为例，整个项目导入108台自动化设备，并完成联网化。
    制程中SMT导入设备9台，节省人力50人,节省比例96%，；ASSY导入设备21台，节省人力74人，节省比例79%；Test导入设备78台，节省人力
    156人，节省比例88%，。整体项目完成后，人力节省280人，人力节省88%，提升效益2.5倍。
                </p>
            </figure>
            <Modal
                v-model="viewModal"
                title="报名参观灯塔工厂"
                width="540"
                :mask-closable="false">
                <Form :label-width="80">
                    <FormItem label="姓名">
                        <Input style="width:300px" v-model="signUpInfo.name"/>
                    </FormItem>
                    <FormItem label="参观人数">
                        <InputNumber :min="1" style="width:300px" v-model="signUpInfo.count"></InputNumber>
                    </FormItem>
                    <FormItem label="所属公司">
                        <Input style="width:300px" v-model="signUpInfo.company"/>
                    </FormItem>
                    <FormItem label="手机号码">
                        <Input style="width:300px" v-model="signUpInfo.phone"/>
                    </FormItem>
                    <FormItem label="邮箱">
                        <Input style="width:300px" v-model="signUpInfo.mail"/>
                    </FormItem>
                    <!-- <FormItem label="验证码">
                        <Input style="width:200px"/>
                        <Button type="success">发送验证码</Button>
                    </FormItem> -->
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="sign">{{ isSignup ? "更新" : "报名"}}</Button>
                </div> 
            </Modal>
            <Modal
                v-model="personModal"
                title="参观人员"
                width="820"
                :footer-hide="true"
                :mask-closable="false">
                <Table :columns="columns" :data="viewPersonInfo">
                    
                </Table>
            </Modal>
        </div>
    </section>
</template>

<script>
import { formatData } from '../../utils/format'
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            viewModal:false,
            personModal:false,
            isSignup:false,
            signUpInfo:{
                company:"",
                count:null,
                mail:"",
                name:"",
                phone:""
            },
            columns:[
                    {
                        title: '公司',
                        align:'center',
                        key: 'company'
                    },
                    {
                        title: '人数',
                        align:'center',
                        key: 'count'
                    },
                    {
                        title:'时间',
                        align:'center',
                        render:(h,params) => {
                            return h('div',formatData(params.row.date))
                        }
                    },
                    {
                        title: '邮箱',
                        align:'center',
                        key: 'mail'
                    },
                    {
                        title: '名称',
                        align:'center',
                        key: 'name'
                    },
                    {
                        title:'周期',
                        align:'center',
                        key:'period'
                    },
                    {
                        title: '电话',
                        align:'center',
                        key: 'phone'
                    }
                ],
                viewPersonInfo:[]
        }
    },
    methods: {
        ...mapActions(['XhasSignUp','XgetSignUpList','XsignUp','XupdateSignUp']),
        sign(fun){
            let tips = this.isSignup ? "更新成功" : "报名成功";
            fun = this.isSignup ? this.XupdateSignUp : this.XsignUp;
            fun(this.signUpInfo).then(res => {
                this.$Message.success(tips);
                this.viewModal = false;
                this.mountedHasSignUp();
            })
            .catch(err => {
                this.$Message.error(err.response.data.message)
            })
        },
        getSignUpListInfo(){
            this.XgetSignUpList().then(res => {
                this.personModal = true;
                this.viewPersonInfo = res.data;
            })
        },
        mountedHasSignUp(){
            this.XhasSignUp().then(res=> this.isSignup = res.data)
        }
    },
    mounted(){
        this.mountedHasSignUp()
    }
}
</script>

<style lang="scss" scoped>
    .content{
        flex:1;
        min-width: 1200px;
        padding: 20px;
        background-image: url(../../assets/images/lighthouse.png);
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-size: 100% 1079px;

    }
    
    .section-block{
        width: 1200px;
        margin: 0 auto;
       
        .shadow-block{
            height:256px;
            padding:50px;
            background:rgba(255,255,255,1);
            opacity:0.8;
            border-bottom: 1px solid #f7f7f7;
            & > span{
                font-size:12px;
                font-weight:400;
                color:rgba(77,90,106,1);
                margin-bottom: 21px;
            }
            & > div{
                margin-top:45px;                
            }

            p{
                font-size:18px;
                font-weight:400;
                color:rgba(51,51,51,1);
                display: inline-block;
            }
        }
        .map-block,.video-block,.fac-block,.domain-block{
            position: relative;
            background-color: #fff;
            font-size:32px;
            font-weight:600;
            color:rgba(77,90,106,1);
            padding:20px;
            & > figcaption{
                margin:70px auto 20px;
                text-align: center;
            }
        }
        .map-block > img{
            display: block;
            margin: 0 auto;
            width: 1152px;
            height: 732px;
        }
        .video-block{
            height: 550px;

            & > video{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: 400px;
                width: 1000px;
            }
        }
        .fac-block .desc-block{
            display: flex;
            & > div{
                width: 350px;
                height: 450px;
                border:1px solid rgba(122, 179, 250, 1);
                margin-left:30px;
                padding: 20px;
        
                & > figure{
                    text-align: center;
                    font-size: 30px;
                }
                & > p{
                    text-align: center;
                    margin:50px auto;
                    font-size:16px;
                    font-weight:400;
                    color:rgba(0,0,0,1)
                }
            }
        }
        .domain-block  > p{
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:24px;
            margin-bottom:10px;
            padding: 5px;
        }
    }
</style>
